<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<title>{{title}}</title>
		<link rel="stylesheet" type="text/css" href="../wwwroot/bootstrap/css/bootstrap.css"/>	
		<link rel="stylesheet/less" type="text/css" href="search.less"/>
		<script src="less.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@keyframes changeW{
				from{width: 30px;}
				to{width:80%;}
			}
			.changeW{
				animation: changeW 1s linear;
			}
			@keyframes  move{
				from{left:0}
				to{left:190px}
			}
			.move {
				animation:move 1.1s linear both;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="container">							
				 	<div class="ip">
						<input class="form-control" type="text" name="search" required id="search" value="" placeholder="请输入..." autocomplete="off" style="border: 1px solid #ccc !important;" />
						<a id="searchBtn" for="phone" ><span class="glyphicon glyphicon-search"></span></a>
					</div>				
			</div>
		</header>
		<section class="recommend" style="display:none ;" >
			<ul >
					<li class="rotate"><a href=""></a></li>
					<li class="rotate"><a href=""></a></li>
					<li class="rotate"><a href=""></a></li>
					<li class="rotate"><a href=""></a></li>
					<li class="rotate"><a href=""></a></li>
					<li class="rotate"><a href=""></a></li>					
			</ul>
			
		</section>
		
		
		
	</body>
</html>
<script src="../wwwroot/libs/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../wwwroot/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		$(function(){
			var index = 0;
			var rotateTime = "";
					setTimeout(function(){						
						$(".ip").css("width","80%");	
						rotateFn(1);
					},2500)			
					setTimeout(function(){
						$(".ip").addClass("changeW")	
						
					},1500)
				
					function count(){
						if(index==6){
							index = 0;								
						}
						$(".rotate").eq(index).addClass("rot").siblings().removeClass("rot");					
						index++;
					}
				
				function rotateFn(torf){											
						index = 0;
						if(torf){
							rotateTime = setInterval(count,5000);
							$(".recommend").fadeIn();							
						}else{							
							clearInterval(rotateTime);				
							$(".recommend").fadeOut();							
						}
				}
				
			
			$("#search").on("input",function(){
				if($(this).val()){
					rotateFn(0);				
				}else{
					rotateFn(1);
					
				}					
			})
			
			
		});
		
		
		
</script>